<template>
<div>
  <el-row :gutter="20">
    <!--用户数据-->
    <el-col :span="20" :xs="24">
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
        <el-form-item label="登陆账号" prop="userName">
          <el-input
            v-model="queryParams.userName"
            placeholder="请输入用户名称"
            clearable
            style="width: 240px"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="员工姓名" prop="nickName">
          <el-input
            v-model="queryParams.phonenumber"
            placeholder="请输入员工姓名"
            clearable
            style="width: 240px"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        </el-form-item>
      </el-form>

<!--      <span style="margin-left: 2vw">编号</span>-->
<!--      <span style="margin-left: 6vw">登陆账号</span>-->
<!--      <span style="margin-left: 6vw">员工姓名</span>-->
<!--      <span style="margin-left: 6vw">工厂</span>-->
<!--      <span style="margin-left: 6vw">车间</span>-->
<!--      <span style="margin-left: 6vw">班组</span>-->
<!--      <span style="margin-left: 6vw">产线</span>-->
<!--      <span style="margin-left: 6vw">工位</span>-->
<!--      <span style="margin-left: 6vw">卡号</span>-->
<!--      <span style="margin-left: 3vw">操作</span>-->
<!--      <div v-loading="loading"  v-for="(item,index) in tableData" style="margin-left: 2vw;margin-bottom: 4vh;" >-->
<!--        <el-col :span="24">-->
<!--        <span property="userId">{{item.userId}}</span>-->
<!--        <span property="userName"  style="margin-left: 7vw">{{item.userName}}</span>-->
<!--        <span property="nickName"  style="margin-left: 7vw">{{item.nickName}}</span>-->
<!--        <span property="factory"  style="margin-left: 7vw">{{item.factory}}</span>-->
<!--        <span property="=workShop" style="margin-left: 5vw">{{item.workShop}}</span>-->
<!--        <span property="=team"  style="margin-left: 5vw">{{item.team}}</span>-->
<!--        <span property="productLine"  style="margin-left: 5vw">{{item.productLine}}</span>-->
<!--        <span property="station"  style="margin-left: 5vw">{{item.station}}</span>-->
<!--        <span property="cardId"  style="margin-left: 3vw">{{item.cardId}}</span>-->
<!--        <el-button size="small" @click="updateUserInfo(item)" >保存</el-button>-->
<!--        </el-col>-->
<!--      </div>-->

      <vxe-table
        border
        resizable
        show-footer
        ref="xTable"
        height=500
        :data="tableData"
      >
        <vxe-column  field="userId"  title="ID" width="60" />
        <vxe-column  field="userName"  title="登陆账号" width="160" />
        <vxe-column  field="nickName"  title="姓名" width="100" />
        <vxe-column  field="factory"  title="工厂" width="100" >
          <template #default="{ row }">
            <vxe-select v-model="row.factory" transfer>
              <vxe-option value="Man" label="Man"></vxe-option>
              <vxe-option value="Women" label="Women"></vxe-option>
            </vxe-select>
          </template>
        </vxe-column>
        <vxe-column  field="workShop"  title="车间" width="160" />
        <vxe-column  field="team"  title="班组" width="160" />
        <vxe-column  field="productLine"  title="产线" width="160" />
        <vxe-column  field="station"  title="工位" width="160" >
        </vxe-column>
        <vxe-column  field="cardId"  title="ID卡号"  />
        <vxe-column>
          <template #default="{ row }">
            <vxe-button @click="updateUserInfo(row)" size="mini">保存</vxe-button>
          </template>
        </vxe-column>
      </vxe-table>
      <div class="block">
        <pagination
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
          :total=total>
        </pagination>
      </div>

    </el-col>
  </el-row>

</div>
</template>

<script>
import { listUser,updateUser} from "@/api/system/user";

export default {
  name: 'userBaseDate',
  data(){
    return{
      loading1: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        userId: undefined,
        userName: undefined,
        nickName: undefined,
        phonenumber: undefined,
        status: undefined,
        deptId: undefined
      },
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 用户表格数据
      tableData: null,
      // 弹出层标题
      title: "",
      // 部门树选项
      deptOptions: undefined,
      // 是否显示弹出层
      open: false,
      // 部门名称
      deptName: undefined,
      // 默认密码
      initPassword: undefined,
      // 日期范围
      dateRange: [],
      // 岗位选项
      postOptions: [],
      // 角色选项
      roleOptions: [],
    }
  },
  methods:{

    /**修改用户生产相关属性*/
    updateUserInfo(data) {
      updateUser(data).then(response => {
        this.$modal.msgSuccess("修改成功");
        this.open = false;
        this.getList();
      });
    },
    handleQuery(){
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 查询用户列表 */
    getList() {
      this.loading = true;
      listUser(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
          this.tableData = response.rows;
          this.total = response.total;
          this.loading = false;
        }
      );
    },
  },
  created() {
    // this.getList();
  },
}
</script>

<style scoped>

</style>
